<template>
  <div class="safe">
    <el-menu router :default-active="activeRouter" class="el-menu-demo bdr-10" mode="horizontal">
      <el-menu-item index="/user-center/safe/password">修改密码</el-menu-item>
      <el-menu-item index="/user-center/safe/phone">修改绑定手机号码</el-menu-item>
    </el-menu>
    <router-view class="fx-1 bg-fff bdr-10" :userInfo="userInfo"></router-view>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class Safe extends Vue {
    @Prop() userInfo
    get activeRouter (): string {
      return this.$route.fullPath
    }
  }
</script>

<style lang="less" scoped>
  .f {
    width: 1180px;
    margin: 0 auto;
  }
  .safe {
    display: flex;
    flex-direction: column;
  }
  .el-menu-demo {
    border-bottom: none;
    margin-bottom: 10px;
    padding-left: 10px;
  }
</style>
